<template>
	<view class="card">
		<view class="top">
			<view class="name">{{ cardData.name }}</view>
			<view class="relation">{{ relation }}</view>
			<view class="switchPos" @click.stop>
				<text>设为默认</text>
				<switch class="switch" :checked="cardData.status === 0" @change="changeSwitch" color="#006eff" />
			</view>
		</view>
		<view class="cardNum">{{ cardNum }}</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'
	import {
		updatePatient
	} from '@/api/personApi.js'
	const props = defineProps(['cardData'])
	const emit = defineEmits(['refresh'])
	const dataTemp = {
		...props.cardData
	}
	const relation = computed(() => {
		return ['本人', '子女', '夫妻', '父母', '朋友'][props.cardData.relationType]
	})
	const changeSwitch = async e => {
		if (e.detail.value) {
			dataTemp.status = 0
		} else {
			dataTemp.status = 1
		}
		console.log(dataTemp.status)
		let {
			data
		} = await updatePatient(dataTemp)
		if (data.code !== 0) {
			uni.showToast({
				title: '设置失败',
				icon: 'err'
			})
		}
		emit('refresh')
	}
	const cardNum = computed(() => {
		let start = props.cardData.cardNum.slice(0, 3)
		let end = props.cardData.cardNum.slice(-4)
		return start + '***********' + end
	})
</script>

<style lang="less" scoped>
	.card {
		width: 686rpx;
		height: 180rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
		background: #f5f9ff;
		border-radius: 4px;
		border: 1px solid #f2f2f2;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		padding: 30rpx;

		.top {
			.name {
				font-size: 30rpx;
				color: #555;
			}

			.relation {
				width: 88rpx;
				height: 36rpx;
				color: #006eff;
				background: #e2edfe;
				font-size: 24rpx;
				text-align: center;
				line-height: 36rpx;
				border-radius: 18rpx;
				margin: 0 30rpx;
			}

			&:first-child {
				display: flex;
				align-items: center;

				.switchPos {
					font-size: 24rpx;
					color: #333;
					margin-left: auto;
					transform: translateX(20%);

					.switch {
						transform: scale(0.5) translate(-30%, -15%);
					}
				}
			}
		}

		.cardNum {
			font-size: 24rpx;
			color: #aaa;
		}
	}
</style>
